<template>
    <el-dialog
        title="编辑角色权限"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="30%">
        <el-tree
            ref="roleTree"
            :data="permission"
            :props="props"
            node-key="menuCode"
            show-checkbox>
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <mt-button tupe="submain" @click="handleClose">取消</mt-button>
            <mt-button @click="handleSubmit">确定</mt-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "RolePermission",

    data () {
        return {
            item: {},
            list: [],
            permission: [],
            props: {
                label: "menuName",
                children: "children"
            },
            dialogVisible: false,
            inputWidth: "calc(100% - 1rem)"
        };
    },

    created () {
        this.getRolePermission();
    },

    mounted () {},

    methods: {
        /* 触发弹窗 */
        open (item) {
            this.item = item;
            this.dialogVisible = true;
            if (item.permission) {
                const getAllMenuCodes = (menu) => {
                    let codes = [];
                    menu.forEach(i => {
                        if (Array.isArray(i.children)) {
                            codes = codes.concat(getAllMenuCodes(i.children));
                        }
                        else if (i.menuCode) {
                            codes.push(i.menuCode);
                        }
                    });
                    return codes;
                };

                const newArray = getAllMenuCodes(eval(item.permission));
                this.list = newArray;
                this.$nextTick(() => {
                    this.$refs.roleTree.setCheckedKeys(newArray);
                });
            }
        },

        /* 获取权限配置 */
        getRolePermission (item) {
            this.$request.post(this.API.GET_ROLE_TREE, {}).then(res => {
                if (res.success) {
                    this.permission = res.data;
                }
            });
        },

        /* 提交 */
        handleSubmit () {
            const list = this.$refs.roleTree.getCheckedKeys();
            const result = [];
            const traverse = (items) => {
                items.forEach((item) => {
                    if (list.includes(item.menuCode)) result.push(item);
                    if (item.children) traverse(item.children);
                });
            };
            traverse(this.permission);

            const params = {
                roleId: this.item.roleId,
                rolePermission: JSON.stringify(result)
            };
            console.log(params);
            this.$request.post(this.API.UPDATE_ROLE_TREE, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("修改成功，重新登录后生效");
                    this.$emit("update");
                    this.handleClose();
                }
            });
        },

        /* 关闭弹窗 */
        handleClose () {
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="scss">
</style>